<!-- components/FakeProgress.vue -->
<template>
  <view class="progress-mask" v-if="visible">
    <view class="progress-box">
		<view class="c-fff">
			LOADING...
		</view>
      <view class="progress-bar">
        <view 
          class="progress-inner" 
          :style="{ width: progress + '%' }"
        ></view>
      </view>
      <!-- <text>{{ progress.toFixed(0) }}%</text> -->
      <view @click="$emit('cancel')" class="quxiao">取消</view>
    </view>
	
	
	<view class="abs c-fff fs-24 l-s-2" style="bottom: 27vh;">
		   <slot></slot>   
	</view>
  </view>
</template>

<script>
export default {
	name: 'FakeProgress',
  props: ['visible', 'isDone'],
  data() {
    return {
      progress: 0,
      timer: null
    }
  },
  watch: {
    visible(val) {
      if (val) this.startProgress()
      else this.resetProgress()
    },
    isDone(val) {
      if(val) this.finishProgress()
    }
  },
  methods: {
    startProgress() {
      this.progress = 0
      this.timer = setInterval(() => {
        if(this.progress < 90) {
          const speed = this.progress < 70 ? 3 : 0.5
          this.progress = Math.min(90, this.progress + speed)
        }
      }, 100)
    },
    finishProgress() {
      clearInterval(this.timer)
      this.progress = 100
      setTimeout(() => {
        this.$emit('update:visible', false)
        this.$emit('finishProgress')
      }, 500)
    },
    resetProgress() {
      clearInterval(this.timer)
      this.progress = 0
    }
  }
}
</script>

<style scoped>
.progress-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.progress-box {
  /* background: white; */
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  text-align: center;
}

.progress-bar {
  height: 20px;
  /* background: #eee; */
  border-radius: 4rpx;
  border: 2rpx solid #fff;
  overflow: hidden;
  margin: 10px 0;
   padding: 4rpx;
}

.progress-inner {
  height: 100%;
  background: #fff;
/* boder-radiusl: 4rpx; */
  transition: width 0.3s ease;
}

.quxiao {
  margin-top: 10px;
  padding: 5px 15px;
  color: white;
  
}
</style>